<template>
  <div class="content-container" :style="{'--theme-color': $store.settings.theme}">
    <div class="left-menu">
      <div class="left-title">界面设置</div>
      <el-scrollbar class="page_list">
        <template v-for="(group, index) in uiInfoList" :key="index">
          <template v-for="(compInfo,compInfoIndex) in group" :key="compInfo.compKey">
            <div v-if="uiInfoList.length>1&&compInfoIndex===0" class="page_list_group_title">{{ compInfo.platform }}</div>
            <div class="page_list_item" :class="{ active: curSelectKey === compInfo.compKey }" @click="handleSelect(compInfo.compKey)">
              <svg-icon v-px-to-rem class="svg_icon" :style="compInfo.iconStyle" :icon-class="compInfo.icon" :color="compInfo.iconColor"/>
              {{ compInfo.title }}
            </div>
          </template>
        </template>
      </el-scrollbar>
    </div>
    <div class="ui-container" v-loading="!curSelectComp">
      <transition :name="isFirstLoad?'' : 'to-right-transform'">
        <keep-alive>
          <component :key="curSelectKey" :is="curSelectComp" class="app-ui-component"/>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script setup>
import uiInfo from '@/views/common/app/ui/ui-info.js'

// 对象转数组并排序
const uiInfoList = Object.keys(uiInfo).map(key => {
  const compInfo = uiInfo[key]
  compInfo.compKey = key
  if (compInfo.platform === undefined) compInfo.platform = '其它'
  if (compInfo.sort === undefined) compInfo.sort = 999
  if (compInfo.title === undefined) compInfo.title = key
  return uiInfo[key]
}).sort((a, b) => a.sort - b.sort)
    // 根据platform进行分组
    .reduce((result, item) => {
      const foundGroup = result.find(group => group[0].platform === item.platform)
      if (foundGroup) foundGroup.push(item)
      else result.push([item])
      return result
    }, [])

const modules = import.meta.glob('@/views/common/app/ui/module/*.vue')
// 已加载的组件缓存
const compCache = ref({})
const curSelectComp = computed(() => compCache.value[curSelectKey.value])
const curSelectKey = ref("")
const isFirstLoad = ref(true)
// 处理组件选择
const handleSelect = async (compKey) => {
  curSelectKey.value = compKey
  // 如果组件未加载,则进行加载,否则直接使用缓存
  if (compCache.value[compKey]) return
  // 找到对应的模块路径
  const modulePath = Object.keys(modules).find(path => path.includes(`${ compKey }.vue`))
  if (!modulePath) return
  // 加载组件并缓存
  const mod = await modules[modulePath]()
  compCache.value[compKey] = markRaw(mod.default)
  // 确保在首次渲染组件时不触发动画
  setTimeout(() => isFirstLoad.value = false)
}
// 初始加载第一个组件
handleSelect(uiInfoList[0][0].compKey)
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables.module' as variables;

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

$left_list_width: 15%;
$item_height: 40px;
@mixin pane-base-style {
  height: 100%;
  border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid rgb(228, 231, 237);
  padding: 15px;
}

.hasTagsView .app-main .content-container {
  height: calc(100vh - #{variables.$navbar-height} - #{variables.$tags-view-height});
}

.content-container {
  padding: 15px;
  height: calc(100vh - #{variables.$navbar-height});
  display: flex;
  background-color: #f8f8f8;
  user-select: none;
}

.left-menu {
  width: calc(#{$left_list_width});
  @include pane-base-style;

  .left-title {
    font-size: 22px;
    color: #73767a;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
  }

  .page_list {
    height: calc(100% - 42px);
    width: 100%;

    .page_list_group_title {
      color: #73767a;
      font-weight: 700;
      margin: 12px 0 5px;
      font-size: 16px;
    }

    .page_list_item {
      cursor: pointer;
      width: 100%;
      height: $item_height;
      line-height: $item_height;
      border-radius: 6px;
      padding-left: 15px;
      transition: background-color 0.3s ease;
      color: #73767a;
      margin-bottom: 3px;
      font-size: 15px;
      display: flex;
      align-items: center;

      .svg_icon {
        margin-right: 7px;
        height: 20px;
        width: 20px;
        margin-bottom: 2px;
      }

      &:hover {
        background-color: #f5f7fa;
      }

      &.active {
        color: var(--theme-color);
        background-color: #f5f7fa;
      }
    }
  }
}

.ui-container {
  height: 100%;
  margin-left: 8px;
  width: calc(100% - #{$left_list_width} - 8px);
  position: relative;
  overflow: scroll;
  @include pane-base-style;
}
</style>


<style lang="scss" scoped>
.app-ui-component {
  min-width: 100%;
  min-height: 100%;
  padding: 15px;
  position: absolute;
  transition: transform 0.5s ease, opacity 0.5s ease;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* 进入动画的初始状态 */
.to-right-transform-enter-from {
  &.app-ui-component {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* 进入动画的结束状态 */
.to-right-transform-enter-to {
  &.app-ui-component {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 离开动画的初始状态 */
.to-right-transform-leave-from {
  &.app-ui-component {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 离开动画的结束状态 */
.to-right-transform-leave-to {
  &.app-ui-component {
    transform: translateX(100%);
    opacity: 0;
  }
}

</style>
